<template>
  <div>
    <div class="tit">
      <span>修改个人资料</span>
    </div>
    <div class="frm">
      <el-form :model="updateForm">
        <el-form-item label="ID：">
          <el-input
            type="text"
            v-model="updateForm.id"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号：">
          <el-input type="text" v-model="updateForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="text" v-model="updateForm.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input type="text" v-model="updateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input type="text" v-model="updateForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-select
            v-model="updateForm.gender"
            placeholder="请选择性别"
            style="width: 500px"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="updateUser()">修改资料</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      updateForm: {},
    };
  },
  methods: {
    async getList() {
      let id = window.sessionStorage.getItem("id");
      console.log(id);
      let { data: res } = await this.$axios.get("/user/getlist", {
        params: {
          pageNum: 1,
          pageSiz: 1,
          id: id,
        },
      });
      this.updateForm = res.data.list[0]
      console.log(res);
    },
    async updateUser() {
        let {data:res} = await this.$axios.post('user/update',this.updateForm)
        if (res.code != 200) return this.$message.error("更改失败");
        this.$message.success("更改成功");
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.tit {
  font-size: 40px;
  margin: 0 auto;
  text-align: center;
}
.el-input {
  padding: 20px;
  width: 500px;
}
.el-form {
  margin: 0 auto;
  width: 80%;
  padding: 10px;
  .el-form-item {
    background-color: #e6eae3;
    margin: 20px auto;
    width: 80%;
    display: flex;
    justify-content: space-between;
    border: 1px solid;
    border-radius: 10px;
  }
}
</style>